<template>
  <div>
    <div class="ret">
      <van-nav-bar title="欢迎使用预约服务" left-text="返回" left-arrow @click-left="toHomeIndex()"/>
    </div>
    <div>
      <div class="icon">
        <van-icon name="success"/>
      </div>
      <div class="cart">提前寻找车辆</div>
      <div class="icon">
        <van-icon name="success"/>
      </div>
      <div class="cart">可实时查看行程</div>
      <div class="icon">
        <van-icon name="success"/>
      </div>
      <div class="cart">乘车人无需付费</div>
    </div>
    <div class="choose">
      <div>
        <van-cell-group>
          <van-field v-model="order.passengerPhone" placeholder="乘车人手机号"/>
          <van-field v-model="order.passengerName" placeholder="乘车人姓名(选填)"/>
        </van-cell-group>
      </div>

      <div class="mess">
        <van-icon name="chat-o" size="2rem"/>
        <span style="margin-left: 15px;font-size: 20px">给司机捎句话(选填)</span>
        <div class="mess-but">
          <van-button type="primary" class="but" round>老人，请多关照</van-button>
          <van-button type="primary" class="but" round>孕妇，请多关照</van-button>
          <van-button type="primary" class="but2" round>请帮忙提行李</van-button>
          <van-button type="primary" class="but2" round>请送进小区</van-button>
        </div>

      </div>
      <div>
        <van-button type="primary" style="width: 90%;margin-left: 5px;margin-top: 95px;background-color: #4B9EFF"
                    @click="findByPassenger()">确认
        </van-button>
      </div>
      <div class="wenxin">
        <div class="wenxin-dai">
          <span>代叫服务温馨提醒:</span>
        </div>
        <div class="wenxin-an">
          <span style="font-size: 40px; margin-top: 10px; margin-left: 10px">.</span>
          <span>为了安全，请不要为未成年人单独叫车</span>
        </div>
        <div class="wenxin-shi">
          <span style="font-size: 40px; margin-top: 10px; margin-left: 10px">.</span>
          <span>实际乘车人在行程中，也需要遵守平台规则</span><span style="color: #4B9EFF">《专快豪华车服务协议》</span>
          <span>如有违反，代叫人也需要承担需要承担的连带责任</span>
        </div>
      </div>

    </div>


  </div>
</template>
<script>

import axios from "axios";

export default {
  data() {
    return {
      map: null,
      passengerName: '',
      passengerPhone: '',
      orderStatus: 0,
      //出发地经纬度
      startLatitudeAndLongitude: "",
      // 目的地经纬度
      endLatitudeAndLongitude: "",
      //出发地
      startaddress: "",
      //目的地
      endaddress: "",
      flag: false,
      order:{
        passengerName: "",
        passengerPhone: ""
      }

    };
  },

  created() {
    this.startAndEndaddress()
  },
  mounted() {

  },
  methods: {
    findByPassenger(){
      axios.post('http://localhost:8081/passenger/order/findByPassenger',this.order).then(res=>{
        console.log(res);
        if (res.status===200){
          this.$router.push({
            path: '/routeCart',
            query: {
              startLatitudeAndLongitude: this.startLatitudeAndLongitude,
              endLatitudeAndLongitude: this.endLatitudeAndLongitude
            }
          })
        }else{
          this.$toast("您已预约过该行程，请勿重复预约");
        }
      })
    },

    //获取出发点目的地地址
    startAndEndaddress() {
      this.startaddress = this.$route.query.startaddress;
      this.startLatitudeAndLongitude = this.$route.query.startLatitudeAndLongitude;
      this.endaddress = this.$route.query.endaddress;
      this.endLatitudeAndLongitude = this.$route.query.endLatitudeAndLongitude;
      console.log("出发地：", this.startaddress);
      console.log("目的地：", this.endaddress);
      console.log("出发地经纬度：", this.startLatitudeAndLongitude)
      console.log("目的地经纬度：", this.endLatitudeAndLongitude)
    },

    toHomeIndex() {
      this.$router.push({
        path: '/',
        query: {
          startaddress: this.startaddress,
          endaddress: this.endaddress
        }
      })
    }
  }
};

</script>
<style scoped>
.choose {
  width: 100%;
  height: 400px;
  margin-left: 15px;
  margin-top: 30px;
  float: left;
  background-color: white;
}

.but {
  color: black;
  border: #dcdde0;
  width: 40%;
  height: 38px;
  margin-left: -15px;
  margin-right: 28px;
  margin-top: 31px;
  background-color: #dcdde0;
}

.but2 {
  color: black;
  border: #dcdde0;
  width: 40%;
  height: 38px;
  margin-left: -15px;
  margin-top: 15px;
  margin-right: 28px;
  background-color: #dcdde0;
}

.wenxin {
  width: 92%;
  height: 163px;
  margin-top: 46px;
  //background-color: #f6e992;
  border-radius: 10px;
  word-wrap: break-word;
}

.wenxin-dai {
  font-size: 20px;
  margin-left: 15px;
  margin-top: 15px;
  font-weight: bold;
}

.wenxin-an {
  font-size: 15px;
  margin-left: 0px;
  margin-top: -14px;
}

.wenxin-shi {
  font-size: 15px;
  margin-left: 0px;
  margin-top: -14px;
}

.Home {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 70vh;
  margin-left: 10px;
}

.start {
  font-size: 15px;
  width: 80%;
  margin-left: 46px;
  margin-top: -21px;
  float: left;
  word-wrap: break-word;
}

.end {
  font-size: 15px;
  width: 80%;
  height: 70px;
  //margin-left: 46px;
  //margin-top: -21px;
  margin-left: 16px;
  margin-top: -215px;
  float: left;
  word-wrap: break-word;
}

.mess {
  width: 100%;
  height: 80px;
  margin-left: 15px;
  margin-top: 20px;
  float: left;
}

.mess-but {
  width: 100%;
  height: 50px;
  margin-left: 15px;
  margin-top: -20px;
  float: left;
}

.startRound {
  width: 100%;
  height: 70px;
  margin-top: 10px;
  margin-left: 10px;
}

.time {
  width: 100%;
  height: 100px;
  margin-left: 15px;
  margin-top: 20px;
  float: left;
  background-color: white;
}

.time-choose {
  width: 100%;
  height: 50px;
  margin-left: 27px;
  margin-top: -20px;
  float: left;
}

.icon {
  width: 100%;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}

.cart {
  width: 100%;
  margin-left: 40px;
  margin-top: -21px;
  float: left;
}

</style>